<template>
	<div class="App-footer">
		<div class="App-footerNav">
			<router-link 
				to="/Home"
				class="App-footerDetail" 
				:class="{'App-footerDetail-actived': actived==='Home'}">
				<div class="iconfont icon-shouye-copy"></div>
				<div class="name">首页</div>
			</router-link>
			<router-link 
				to="/Shop"
				class="App-footerDetail" 
				:class="{'App-footerDetail-actived': actived==='Shop'}">
				<div class="iconfont icon-icon-yxj-mall"></div>
				<div class="name">商城</div>
			</router-link>
			<router-link 
				to="/Find"
				class="App-footerDetail" 
				:class="{'App-footerDetail-actived': actived==='Find'}">
				<div class="iconfont icon-faxian"></div>
				<div class="name">发现</div>
			</router-link>
			<router-link 
				to="/My"
				class="App-footerDetail" 
				:class="{'App-footerDetail-actived': actived==='My'}">
				<div class="iconfont icon-gerenzhongxinzhuyegerenziliao"></div>
				<div class="name">我的</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			'actived': {
				type: String,
				default: 'Home'
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';
	
	.App-footer {
		width: 100%;
		height: 40px;
		background-color: $color-default;
		position: fixed;
		bottom: 0px;
		left: 0px;
		.App-footerNav {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 14px;
			.App-footerDetail {
				flex: 1;
				color: rgb(195, 173, 136);
				.name {
					font-size: 12px;
				}
				&.App-footerDetail-actived {
					color: rgb(106, 180, 57);
				}
			}
		}
	}
</style>